<template>
  <span>{{ showLabel }}</span>
</template>
<script>
import { getMdmData } from '@/api/dataDict'
const cache = {}
export default {
  name: 'CMdmView',
  props: {
    value: {
      type: [String, Array],
      default: undefined
    },
    label: {
      type: [String, Array],
      default: undefined
    },
    docCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mdmData: []
    }
  },
  computed: {
    showLabel() {
      if (this.label !== undefined && this.label !== null) {
        return typeof this.label === 'string' ? this.label : (this.label instanceof Array ? this.label.join(',') : '')
      }
      if (this.value === undefined || this.value === null) {
        return ''
      }
      let v = this.value
      if (typeof this.value === 'string') {
        v = this.value.split(',')
      }
      return this.mdmData.filter(e => v.includes(e.code)).map(e => e.name).join(',')
    }
  },
  watch: {
    value: {
      handler(v) {
        if (!!v && !this.label) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  created() {

  },
  methods: {
    getData() {
      if (cache[this.docCode]) {
        this.mdmData = cache[this.docCode]
        return
      }
      return getMdmData(this.docCode).then(res => {
        this.mdmData = res
        cache[this.docCode] = res
      })
    }
  }
}
</script>
